<template>
    <div class="wsc-jc-details">
        <section class="headBtn">
            <div :class="{ active: isActive1==1 }" @click="changeActive1(1)">
                进水
            </div>
            <div :class="{ active: isActive1==2 }" @click="changeActive1(2)">
                出水
            </div>
        </section>
        <section class="tableBox">
            <div class="title">
                实时当前值
            </div>
            <div>水量</div>
            <div>{{water.dailyFlowValue}}</div>
            <div>压力</div>
            <div>{{water.dailyPressure}}</div>
            <div>COD</div>
            <div>{{water.dailyCodValue}}</div>
            <div>总磷</div>
            <div>{{water.dailyTpValue}}</div>
            <div>氨氮</div>
            <div>{{water.dailyTnValue}}</div>
            <div>能耗</div>
            <div>{{water.dailyEnergyConsumption}}</div>
        </section>
        <section class="chartBtn">
            <div :class="{ active: isActive2==1 }" @click="changeActive2(1)">水量</div>
            <div :class="{ active: isActive2==2 }" @click="changeActive2(2)">COD</div>
            <div :class="{ active: isActive2==3 }" @click="changeActive2(3)">氨氮</div>
            <div :class="{ active: isActive2==4 }" @click="changeActive2(4)">压力</div>
            <div :class="{ active: isActive2==5 }" @click="changeActive2(5)">总磷</div>
            <div :class="{ active: isActive2==6 }" @click="changeActive2(6)">能耗</div>
        </section>
        <section>
            <div ref="echartContainer" style="width:100%; height:300px"></div>
        </section>
        <section class="map">
            <div class="mapBox" @click="toMap"></div>
            <!-- <a class="mapBox" href="/static/map.html"></a> -->
            <div style="width:95%;height:200px;border:#ccc solid 1px;border-radius:10px;margin:0 auto" id="dituContent"></div>
        </section>
        <section class="video">
            <ul>
                <li v-if="videoList.length==0">暂无监控</li>
                <li v-for="item in videoList" :key="item.value">
                    <a :href="item.addressUrl" style="color:#000"><i class="iconfont icon-shipin"></i>
                        <p>{{item.name}}</p>
                    </a>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isActive1: 1,
            isActive2: 1,
            detailsList: [],
            siteIdData: {
                in: '',
                out: ''
            },
            water: {

            },
            videoList: [],
            mapId: {
                x: '120.222744',
                y: '30.191123'
            }
        };
    },
    mounted() {
        this.getDetailsList(() => {
            this.getDetailsIn()
            this.getDetailsOut()
            this.getWatertimeList()
        })
        this.select()
        this.getMap()
        this.getVideoList()
        // this.getWatertimeList()
    },
    methods: {
        changeActive1(num) {
            this.isActive1 = num
        },
        changeActive2(num) {
            this.isActive2 = num
        },
        //获取出水点和进水点位id
        getDetailsList(callback) {
            this.$api.wushuichangjiance.detailsList({
                siteId: this.$route.query.id,
            }).then(res => {
                if (res.success) {
                    this.siteIdData.in = res.data.listIn[0].siteId
                    this.siteIdData.out = res.data.listOut[0].siteId
                    callback()
                }
            });
        },
        //获取进水详情
        getDetailsIn() {
            this.$api.wushuichangjiance.detailsIn({
                id: this.siteIdData.in
            }).then(res => {
                if (res.success) {
                    this.water = res.data
                }
            });
        },
        //获取出水详情
        getDetailsOut() {
            this.$api.wushuichangjiance.detailsOut({
                id: this.siteIdData.out
            }).then(res => {
                if (res.success) {
                    this.water = res.data
                }
            });
        },
        //获取对应视频列表
        getVideoList() {
            this.$api.wushuichangjiance.videoList({
                id: this.$route.query.id
            }).then(res => {
                if (res.success) {
                    this.videoList = res.data.list1
                }
            });
        },
        //获取echart数据
        select() {
            let myChart = echarts.init(this.$refs.echartContainer);
            // this.getEveryDayEvent(() => {
            myChart.setOption({
                title: {
                    // text: '某地区蒸发量和降水量',
                    // subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['实时', '昨日']
                },
                toolbox: {
                    show: true
                },
                calculable: true,
                grid: { // 控制图的大小，调整下面这些值就可以，
                    x: 40,
                    x2: 20,
                    y2: 30 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '实时',
                        type: 'line',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '昨日',
                        type: 'line',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
            // });
        },
        getMap() {
            var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
            var point = new BMap.Point(this.mapId.x, this.mapId.y); //定义一个中心点坐标
            map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中
        },
        toMap() {
            console.log('aaa')
            this.$router.push({ path: '/bigmap', query: { x: this.mapId.x, y: this.mapId.y } })
        },
        //水量时间列表
        getWatertimeList() {
            this.$api.wushuichangjiance.watertime({
                id: this.siteIdData.in
            }).then(res => {
                if (res.success) {
                    // this.videoList = res.data.list1
                }
            });
        },
    }
}
</script>

<style>
</style>
